<template>
  <view class="ts-flex ts-column ts-flex-item">
    <view class="ts-flex ts-row">
      <ts-search-bar></ts-search-bar>
      <!-- #ifdef MP-WEIXIN -->
      <view class="icon" @tap="showRightDrawer">
        <ts-icon type="bars" color="#666666" size="22"></ts-icon>
      </view>
      <!-- #endif -->
    </view>
    <view class="page-content">
      <block v-for="(lab,index) in labs" :key="index">
        <view class="lab-group">{{lab.group}}</view>
        <view class="ts-list">
          <view class="ts-list-cell" hover-class="ts-list-cell-hover" :data-lab="item" v-for="(item,index1) in lab.lists"
            :key="index1">
            <view class="ts-list-cell-navigate">
              <view class="lab-content">
                <view class="lab-title">{{item.meta.title}}</view>
                <view class="lab-description">{{item.meta.description}}</view>
                <view class="button-row">
                  <button class="ts-background-red" size="mini" :data-item="item" v-if="item.demoUrl.length >0 " @tap="showDemo(item.demoUrl)">演示</button>
                  <button class="ts-background-green" size="mini" :data-item="item" v-if="item.meta.sourceUrl.length >0 "
                    @tap="showSource">源码</button>
                  <button class="ts-background-primary" size="mini" :data-item="item" v-if="item.meta.documentUrl.length >0 "
                    @tap="showDocument">教程</button>
                  <button class="ts-background-yellow" size="mini" :data-item="item" v-if="item.meta.resourceUrl.length >0 "
                    @tap="showResource">资源</button>
                  <button class="ts-background-purple" size="mini" :data-item="item" v-if="item.meta.videoUrl.length >0 "
                    @tap="showVideo">视频</button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>

    </view>
    <ts-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
      <view class="drawer-content">
        <view class="ts-h4 ts-text-bold ts-padding ts-center">实验指南</view>
        <view class="ts-h5">
          实验部分包含“演示”、“源码”、“教程”、“资源”和“视频”5个部分的功能，旨在帮助学生快速掌握ts-app开发的基础知识，完整的系列教程，请阅读慕课部分。
        </view>
        <!-- <button class="button" type="warn" @tap="closeRightDrawer">关闭抽屉式导航</button> -->
      </view>
    </ts-drawer>
  </view>
</template>

<script>
  import tsDrawer from 'components/teaset/components/ts-drawer.vue';
  import tsIcon from 'components/teaset/components/ts-icon/ts-icon.vue';
  import tsSearchBar from 'components/teaset/components/ts-search-bar/ts-search-bar.vue';
  export default {
    components: {
      tsDrawer,
      tsIcon,
      tsSearchBar,
    },
    data() {
      return {
        rightDrawerVisible: false,
        labs: [{
            group: '模版页面',
            lists: [{
              demoUrl: '/pages/example/teaset/templates/map',
              meta: {
                title: '活动安排模版页面',
                description: '演示Teaset基础组件、segment-control、背景图片、map组件用法',
                documentUrl: '',
                sourceUrl: '',
                resourceUrl: '',
                videoUrl: ''
              }
            }, {
              demoUrl: '/pages/example/teaset/templates/member-jixiao',
              meta: {
                title: '会员绩效模版页面',
                description: '演示Teaset基础组件、echart组件用法',
                documentUrl: '',
                sourceUrl: '',
                resourceUrl: '',
                videoUrl: ''
              }
            }, {
              demoUrl: '/pages/example/teaset/templates/lost-found/index',
              meta: {
                title: '失物招领完整案例',
                description: '演示Teaset组件用法。Mockjs数据源',
                documentUrl: '',
                sourceUrl: '',
                resourceUrl: '',
                videoUrl: ''
              }
            }]
          },
          {
            group: 'Teaset组件',
            lists: [{
                demoUrl: '/pages/example/teaset/components/basic',
                meta: {
                  title: '基础组件',
                  description: 'Teaset基础组件用法示例。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }, {
                demoUrl: '/pages/example/teaset/components/city-picker',
                meta: {
                  title: '城市选择窗口',
                  description: '城市选择窗口。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }, {
                demoUrl: '/pages/example/teaset/components/timeline',
                meta: {
                  title: '时间线',
                  description: '使用时间线展示Teaset组件库发展历程。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              },
              {
                demoUrl: '/pages/example/teaset/components/popup-ad',
                meta: {
                  title: '弹出广告',
                  description: '弹出广告组件，支持定义关闭图标，支持关闭事件的处理，演示v-model实现属性的双向绑定的技术。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }, {
                demoUrl: '/pages/example/teaset/components/popup',
                meta: {
                  title: '底部弹出窗口',
                  description: '底部弹出窗口，用于构造购物车、分享菜单等底部弹出选项。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              },
              {
                demoUrl: '/pages/example/teaset/components/drawer',
                meta: {
                  title: '抽屉菜单',
                  description: '兼容小程序和H5APP的抽屉样式菜单',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }, {
                demoUrl: '/pages/example/teaset/components/left-category',
                meta: {
                  title: '左侧导航菜单',
                  description: '左侧导航菜单',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              },
              {
                demoUrl: '/pages/example/teaset/components/segmented-control',
                meta: {
                  title: '分段导航',
                  description: '分段导航，商品列表，上拉加载综合案例',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              },
              {
                demoUrl: '/pages/example/teaset/components/load-more',
                meta: {
                  title: 'Load more效果',
                  description: '这是load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }, {
                demoUrl: '/pages/example/teaset/components/load-more-product-list',
                meta: {
                  title: 'Load more 高级案例',
                  description: '使用load-more组件实现的上拉加载更多商品列表的例子',
                  documentUrl: '',
                  sourceUrl: '',
                  resourceUrl: '',
                  videoUrl: ''
                }
              }
            ]
          }
        ],
      }
    },
    methods: {
      closeRightDrawer() {
        this.rightDrawerVisible = false;
      },
      showRightDrawer() {
        this.rightDrawerVisible = true;
      },
      showDemo(demoUrl) {
//         const item = e.target.dataset.item;
//         const demoUrl = item.demoUrl;
        if (demoUrl) {
          console.log(demoUrl)
          uni.navigateTo({
            url: demoUrl
          });
        }
      },
      showDocument(e) {
        const item = e.target.dataset.item;
        const documentUrl = item.meta.documentUrl;
        const title = item.meta.title;
        if (documentUrl) {
          const url = `/pages/reader?document=${documentUrl}&title=${title}`;
          uni.navigateTo({
            url: url
          });
        }
      },
      showSource(e) {
        const item = e.target.dataset.item;
        const documentUrl = item.meta.sourceUrl;
        const title = item.meta.title;
        if (documentUrl) {
          const url = `/pages/reader?document=${documentUrl}&title=${title}`;
          uni.navigateTo({
            url: url
          });
        }
      },
      showResource(e) {
        const item = e.target.dataset.item;
        const documentUrl = item.meta.resourceUrl;
        const title = item.meta.title;
        if (documentUrl) {
          const url = `/pages/reader?document=${documentUrl}&title=${title}`;
          uni.navigateTo({
            url: url
          });
        }
      },
      showVideo(e) {
        const item = e.target.dataset.item;
        const videoUrl = item.meta.videoUrl;
        const title = item.meta.title;
        if (videoUrl) {
          const url = `/pages/video?url=${videoUrl}&title=${title}`;
          uni.navigateTo({
            url: url
          });
        }
      },
    },
    onNavigationBarButtonTap(e) {
      this.rightDrawerVisible = !this.rightDrawerVisible
    }
  }
</script>

<style>
  /* 	page view {
		display: flex;
		flex-direction: row;
	} */

  .icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 10upx;
  }

  .page-content {
    font-size: 30upx;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .ts-list {
    margin-top: 0upx;
  }

  .drawer-content {
    display: flex;
    flex-direction: column;
    padding: 30upx;
  }

  .lab-group {
    padding: 20upx;
    font-size: 36upx;
    font-weight: bold;
    background-color: #000000;
    color: #FFFFFF;
  }

  .lab-title {
    padding: 20upx 0upx;
    font-size: 30upx;
    font-weight: bold;
  }

  .lab-content {
    font-size: 25upx;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .lab-description {
    padding-bottom: 20upx;
  }

  .button-row {
    border-top: #cccccc solid 1upx;
    display: flex;
    flex: 1;
    flex-direction: row;
  }

  .button-row button {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: #ffffff;
  }
</style>
